<template>
  <div class="goods-detail">
    <div @click="cancel" class="cancel">X</div>
    <div class="detail-box">
      <img :src="goods.image" alt="">
      <div class="details">
        <span class="name">{{goods.name}}</span>
        <div class="price-box">
          销售价<span class="price">￥{{ goods.price.toFixed(2) }}</span>
        </div>
        <div class="count-box">
          <span>数量</span>
          <button :disabled="count <= 1" @click="count--" class="decrement" :class="{'not-allowed': count <= 1}">-</button>
          <span class="count">{{ count }}</span>
          <button @click="count++" class="increment">+</button>
        </div>
        <div @click="addToCart()" class="add">加入购物车</div>
        <div @click="buyNow" class="buy">立即购买</div>
      </div>
    </div>
    <div class="introduction">产品介绍</div>
    <hr/>
  </div>
</template>

<script>
import axios from 'axios';

  export default {
    name:'GoodsDetail',
    data(){
      return{
        count:1,
        goods:{id:0,price:0,name:'',image:''},
      }
    },
    methods:{
      cancel(){
        // console.log('点击了取消')
        this.$bus.$emit('showDetails',false)
        // 取消弹框后商品数量变为1
        this.count = 1
      },
      // 添加购物车
      async addToCart(){
        const res = await axios.post('/shoppingCart/add',{
          number:this.count,
          goodId:this.goods.id
        })
        // 给Footer组件传递count数量
        this.$bus.$emit('updateCount',this.count)
        // 隐藏弹框
        this.$bus.$emit('showDetails',false)
        // 商品数量变为1
        this.count = 1
      },
      // 立即购买
      buyNow(){
        // 展示支付弹框
        this.$bus.$emit('showPayBox',true)
        // 关闭商品详情弹框
        this.$bus.$emit('showDetails',false)
        // 重置数量
        this.count = 1
        // 发送WebSocket
        var websocket = null
        var clientId = 123
        // 判断当前浏览器是否支持WebSocket
        if('WebSocket' in window){
          // 连接WebSocket节点
          websocket = new WebSocket("ws://localhost:8081/ws/" + clientId);
        } else {
          alert('Not support websocket')
        }
        // 接收到消息的回调方法
        websocket.onmessage = event => {
          console.log('@@@')
          this.$bus.$emit('beginPay',event.data)
        }
      }
      
    },
    mounted(){
      // 获取当前查看的商品信息
      this.$bus.$on('getGoodsDetail',(goods) => {this.goods = goods})
    }
  }
</script>

<style scoped>
  .goods-detail{
    position: absolute;
    padding: 0 30px 0 35px;
    top: 45px;
    left: 606px;
    width: 500px;
    height: 600px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 4px 6px 12px 0 rgba(0, 0, 0, 0.5) ;
  }
  .goods-detail .cancel{
    position: absolute;
    top: -6px;
    right: -6px;
    width: 28px;
    height: 28px;
    background-color: #cf6722;
    color: #fff;
    text-align: center;
    line-height: 28px;
    border-radius: 14px;
    cursor: pointer;
  }
  .detail-box{
    display: flex;
  }
  .goods-detail img{
    margin-top: 40px;
    width: 175px;
    height: 175px;
    border: 5px solid #afc0da;
    border-radius: 5px;
  }
  .goods-detail .details{
    margin-top: 48px;
    margin-left: 30px;
    width: 240px;
    height: 180px;
  }
  .goods-detail .details .name{
    padding: 2px 4px;
    font-size: 18px;
  }
  .goods-detail .details .price-box{
    margin: 10px 0;
    background-color: #afc0da;
    font-size: 16px;
    width: 230px;
    padding: 3px 5px;
    border-radius: 4px;
  }
  .goods-detail .details .price{
    margin-left: 10px;
    color: #cd6d90;
  }
  .goods-detail .details .count-box{
    display: flex;
    margin-top: 10px;
  }
  .goods-detail .details .count-box span:nth-child(1){
    margin-left: 5px;
    margin-right: 20px;
    padding: 4px 0px 0px 0px;
  }
  .goods-detail .details .count-box .count{
    display: block;
    margin: 0 1px;
    text-align: center;
    line-height: 30px;
    width: 44px;
    height: 30px;
    background-color: #fff;
    color: #afc0da;
    border: 1px solid #afc0da;
    border-radius: 2px;
  }
  .goods-detail .add{
    margin-top: 20px;
    margin-right: 20px;
    padding: 5px 10px;
    display: inline-block;
    width: 102px;
    height: 40px;
    line-height: 30px;
    text-align: center;
    color: #e76443;
    border: 1px solid #e76443;
    border-radius: 20px;
    cursor: pointer;
  }
  .goods-detail .buy{
    display: inline-block;
    padding: 5px 10px;
    width: 102px;
    height: 40px;
    line-height: 30px;
    text-align: center;
    color: #fff;
    background-color: #e76443;
    border-radius: 20px;
    cursor: pointer;
  }
  .introduction{
    margin-top: 30px;
    padding: 5px 10px;
  }
  .count-box .not-allowed{
    cursor: not-allowed
  }
</style>